<template>
  <el-container ref="tableContainerRef" class="search-table">
    <el-header ref="tableHeaderRef" v-if="$slots.row" class="search-table__header">
      <search-form ref="form" @query="$emit('query')" @reset="$emit('reset')" :loading="tableLoading">
        <template>
          <slot name="row" /><!-- 搜索条件 & 按钮 -->
        </template>
      </search-form>
    </el-header>
    <div class="search-table__body">
      <el-row v-if="$slots.actions" ref="actions" class="search-table__action">
        <el-col :span="24">
          <slot name="actions" /><!-- 操作按钮 -->
        </el-col>
      </el-row>
      <el-table id="exportTab" ref="tableRef" v-loading="tableLoading" class="search-table__content" :height="tableHeight" :data="tableData || []" :empty-text="emptyText" border fit align="center" header-align="center" :header-cell-style="{ background: '#ecf5ff', color: '#000000' }" highlight-current-row size="mini" 
        :row-key="rowKeys" :default-sort="defaultSort" @sort-change="handleSortChange" @row-click="rowClick" @selection-change="selection => {this.$emit('selectionChange', selection)}" @select-all="selection => {this.$emit('selectAll', selection)}">
        <slot /><!-- 表格数值 -->
      </el-table>
    </div>
    <el-footer ref="tableFooterRef" v-if="$slots.footer" class="search-table__footer" height="30px">
      <slot name="footer" />
    </el-footer>
  </el-container>
</template>

<script>
import SearchForm from './searchForm'

export default {
  name: 'SearchTable',
  components: {
    SearchForm
  },
  props: {
    labelWidth: {
      type: String,
      default: '70px'
    },
    tableData: {
      type: Array,
      default: () => []
    },
    emptyText: {
      type: String,
      default: ''
    },
    rowKeys: {
      type: Function
    },
    tableLoading: Boolean,
    defaultSort: {
      type: Object,
      default: () => { }
    },
    rowClick: {
      type: Function,
      default: () => { }
    },
  },
  data () {
    return {
      tableHeight: undefined // table表格高度
    }
  },
  computed:{
    
  },
  mounted () {
    // this.initTableMaxHeight()
  },
  beforeUpdate () {
    this.initTableMaxHeight()
  },
  methods: {
    // 表格排序
    handleSortChange (event) {
      const {
        prop,
        order
      } = event
      this.$emit('sortChange', {
        prop,
        order: order ? String.prototype.replace.call(order, 'ending', '') : null
      })
    },
    initTableMaxHeight () {
      const tableHeight = this.splitPX(this.getHeight(this.$refs.tableContainerRef?.$el))
      const tableHeaderHeight = this.splitPX(this.getHeight(this.$refs.tableHeaderRef?.$el))
      const tableFooterRefHeight = this.splitPX(this.getHeight(this.$refs.tableFooterRef?.$el))
      const height = tableHeight - tableHeaderHeight - tableFooterRefHeight - 56
      this.tableHeight = height > 0 ? height : tableHeight + 'px'
      // console.log('表格高度：',tableHeight,'表头高度：',tableHeaderHeight,'表尾巴高度：',tableFooterRefHeight,'表高度：',height)
    },
    getHeight (el) {
      if (el) {
        return window.getComputedStyle(el).height
      }
      return 0
    },
    splitPX (str) {
      if (/px/.test(str)) {
        return parseInt(str.split('px')?.[0] || 0)
      }
      return 0
    },
  }
}
</script>
<style lang="scss" scoped>
.el-table {
  font-size: 14px;
  font-weight: 500;
}

.search-table {
  height: 100%;
  overflow: hidden;
}

.search-table__header {
  // max-height: 42px !important;
  height: auto !important;
  padding: 0;
}

.search-table__body {
  overflow: hidden;
}

.search-table__content {
  // min-height: calc(100vh - 260px);
  // max-height: calc(100% - 36px);
  overflow-x: auto;
}

// // 值为空时自动填充
::v-deep .el-table__body td :empty::after {
  content: '--';
  color: #606266;
}

// 不需要 自动填充的
::v-deep .el-table__body td {
  .el-button :empty::after,
  .el-checkbox :empty::after,
  .el-switch :empty::after,
  .el-radio :empty::after {
    content: '';
  }
}

::v-deep .el-table th > .cell {
  padding-right: 10px;
  padding-left: 10px;
}

::v-deep .el-table .cell {
  padding-right: 10px;
  padding-left: 10px;
}

.search-table__footer {
  margin-top: 10px;
  padding: 0;
}

::v-deep .el-table .error_class {
  color: red !important;
}

::v-deep .el-table .error_class .el-tag {
  color: red !important;
}

// ::v-deep .el-table--scrollable-x {
//   color: red;
// }
</style>
